.container-notification {
    position: fixed !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 2147483647 !important;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}


/* Base da notificação */
.div-notification {
    --notification-header-bg: rgba(15, 23, 42, 0.95);
    --notification-header-font: #f9fafb;
    --notification-header-icon: #9ca3af;
    --notification-bg: rgba(15, 23, 42, 0.85);
    --notification-progress-cont: rgba(148, 163, 184, 0.35);
    --notification-progress-bar: #38bdf8;

    position: relative;
    min-width: 280px;
    max-width: 360px;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: all;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.95),
        rgba(15, 23, 42, 0.85)
    );
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.65),
        0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.35);
    transform: translateX(120%);
    opacity: 0;
}

.notification-enter {
    animation: notification-slide-in 0.35s ease-out forwards;
}

/* Animação de saída */
.notification-exit {
    animation: notification-slide-out 0.35s ease-in forwards;
}


@keyframes notification-slide-in {
    0% {
        transform: translateX(120%) translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateX(-4px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notification-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Header */
.header-notification {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background-color: var(--notification-header-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-notification h3 {
    color: var(--notification-header-font);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.header-notification i {
    color: var(--notification-header-icon);
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease;
}

.header-notification i:hover {
    transform: scale(1.12);
    color: #e5e7eb;
}

/* Conteúdo */
.content-notification {
    padding: 0.85rem 0.9rem 0.75rem;
    background-color: var(--notification-bg);
}

.content-notification p {
    margin: 0;
    color: #e5e7eb;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-line;
}

/* Barra de progresso */
.progress-container {
    width: 100%;
    height: 3px;
    background: var(--notification-progress-cont);
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--notification-progress-bar);
    transition: width 0s;
}

/* ---------------------------- */
/* VARIANTES POR TIPO          */
/* ---------------------------- */

/* Info (default) */
.notification--info {
    --notification-header-bg: rgba(15, 23, 42, 0.95);
    --notification-bg: rgba(15, 23, 42, 0.88);
    --notification-progress-bar: #38bdf8; /* azul */
    border-left: 4px solid #38bdf8;
}

/* Sucesso */
.notification--success {
    --notification-header-bg: rgba(5, 46, 22, 0.98);
    --notification-bg: rgba(6, 78, 59, 0.9);
    --notification-progress-bar: #22c55e; /* verde */
    border-left: 4px solid #22c55e;
}

/* Aviso */
.notification--warning {
    --notification-header-bg: rgba(69, 26, 3, 0.98);
    --notification-bg: rgba(120, 53, 15, 0.92);
    --notification-progress-bar: #facc15; /* amarelo */
    border-left: 4px solid #facc15;
}

/* Erro */
.notification--error {
    --notification-header-bg: rgba(127, 29, 29, 0.98);
    --notification-bg: rgba(153, 27, 27, 0.92);
    --notification-progress-bar: #f97373; /* vermelho */
    border-left: 4px solid #ef4444;
}

/* Modais de confirmação reaproveitando o estilo, mas com leve ajuste */
.div-notification.confirm-modal,
.div-notification.confirm-choice {
    max-width: 420px;
}

.div-notification.confirm-modal .actions-notification,
.div-notification.confirm-choice .actions-notification {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}


/* ----------------------------- */
/* CONTAINER CENTRAL - CONFIRM   */
/* ----------------------------- */

.container-notification-confirm {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* bem alto */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* bloqueia clique no backdrop */
    backdrop-filter: blur(2px);         /* opcional: blur leve */
    background: rgba(15, 23, 42, 0.25); /* opcional: overlay escuro transparente */
}

.container-notification-confirm .div-notification {
    pointer-events: all; /* permite click só na caixinha */
}

/* ----------------------------- */
/* ANIMAÇÃO ESPECIAL CENTRAL     */
/* ----------------------------- */

.div-notification.notification-center {
    /* sobrescreve o translateX padrão das outras */
    transform: scale(0.9);
    opacity: 0;
}

/* entrada central */
.notification-center.notification-enter {
    animation: notification-center-in 0.25s ease-out forwards;
}

/* saída central */
.notification-center.notification-exit {
    animation: notification-center-out 0.2s ease-in forwards;
}

@keyframes notification-center-in {
    0% {
        transform: scale(0.9) translateY(8px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes notification-center-out {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.92) translateY(6px);
        opacity: 0;
    }
}

/* opcional: deixar a confirmação um pouquinho maior */
.div-notification.confirm-modal.notification-center {
    max-width: 460px;
    width: min(90vw, 460px);
}